<template>
    <div class="main-box">
        <div class="title">在线会话</div>
        <div class="operation">
            <div class="operation-bar">
                <div style="margin-left: auto;">
                    <el-form ref="queryFormRef" :model="queryData.data" inline>
                        <el-form-item style="margin-right: 1em;">
                            <el-input clearable style="width: 200px;" v-model="queryData.data.nickname" placeholder="请输入名称">
                                <template v-slot:prefix>
                                    <i class="iconfont icon-sousuo"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getPage" type="primary">
                                <i class="iconfont icon-sousuo" style="margin-right: 5px;"></i>搜索
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" @selection-change="doSelectionChange" v-loading="tableLoading" style="height:100%;">
                
                <el-table-column label="编号" align="center" width="80">
                    <template #default="scope">
                        {{ (queryData.currPage - 1) * queryData.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column prop="date" label="头像" align="center">
                    <template #default="scope">
                        <div class="avatar">
                            <img :src="scope.row.avatar" alt="">
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="登录时间" align="center"></el-table-column>
                <el-table-column prop="lastRequest" label="最近一次访问时间" align="center"></el-table-column>
                <el-table-column prop="osName" label="操作系统" align="center"></el-table-column>
                <el-table-column prop="browserName" label="浏览器" align="center"></el-table-column>

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-popconfirm
                            width="180"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon-color="#626AEF"
                            title="确定让该用户下线么?"
                            @confirm="doConfirm(scope.row)"
                        >
                            <template #reference>
                                <el-button type="primary" link v-if="scope.row.isAdmin != 1 || userStore.userInfo.isAdmin == 1">
                                    下线<i class="iconfont icon-xiangxia"></i>
                                </el-button>
                            </template>
                        </el-popconfirm>
                        
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <Pagination :totalCount="totalCount" :get-page="changeCurrentPage" />

    </div>
</template>

<script setup>
import Pagination from '@/components/Pagination.vue'
import { ref, reactive, onMounted, computed } from 'vue'
import { queryOnlineSession, removeOnlineSession } from '@/api/sessionApi'
import Messager from '@/utils/messager'
import MsgBoxer from '@/utils/msgBoxer'
import useUserStore from '@/store/user'

const userStore = useUserStore()

// 表格 数据
let tableData = ref([])
let totalCount = ref(100)
const queryData = reactive({
    pageSize: 10,
    currPage: 1,
    data: {
        nickname:''
    }
})
// 表格加载
let tableLoading = ref(false)

// 获取分页数据
function getPage() {
    tableLoading.value = true
    queryOnlineSession(queryData).then(res => {
        tableLoading.value = false
        tableData.value = res.list
        totalCount.value = res.totalCount
    })
}

function changeCurrentPage(currPage) {
    queryData.currPage = currPage
    getPage()
}

onMounted(() => {
    getPage()
})

function doConfirm(row){
    removeOnlineSession({sessionId:row.sessionId}).then(res=>{
        Messager.ok('操作成功')
        getPage()
    })
}

// 批量操作
let selectedIds = ref([])
function doSelectionChange(selection) {
    selectedIds.value = []
    selection.forEach((row) => {
        selectedIds.value.push(row.id)
    })
}

function deleteBatch() {
    MsgBoxer.confirm('是否批量删除这 ' + selectedIds.value.length + ' 个').then(() => {
        delBatch(selectedIds.value).then(() => {
            Messager.ok('批量删除成功')
            getPage()
        })
    })
}


</script>

<style lang="scss">
    .main-box {
        display: flex;
        flex-direction: column;

        .table-box {
            flex: 1;
            overflow: hidden;
        }
    }

    .operation-bar {
        display: flex;
    }

    .avatar {
        width: 100%;
        text-align: center;
        img {
            width: 54px;
            height: 54px;
            object-fit: cover;
            border-radius: 50%;
        }
    }
</style>